import React, {createRef} from 'react';
import {Text, TextInput, View, ToastAndroid, Dimensions} from 'react-native';
import Colors from '../resources/Colors';
import Row from '../components/Row.tsx';
import ColorButton from '../components/ColorButton.tsx';
import {loginManager, loginTeacher} from '../store/rootSlice.ts';
import {useDispatch} from 'react-redux';
import {useResponsive} from 'react-native-responsive-hook';
import {useStyles} from '../resources/StyleConstants.js';
export default function LoginView(props) {
  const dispatch = useDispatch();
  const [username, setUsername] = React.useState(
    __DEV__ ? '15716325735' : props.username || '',
  );
  const [password, setPassword] = React.useState(
    __DEV__ ? '123456' : props.password || '',
  );
  const [secureTextEntry] = React.useState(true);
  const {wp, hp, rem} = useResponsive();
  const usernameRef = createRef();
  const passwordRef = createRef();

  const login = async () => {
    try {
      if (props.userType === 2) {
        const data = await dispatch(
          loginManager(username, password, props.loginComplete),
        );
        console.log('----->', data);
      }
      if (props.userType === 1) {
        const data = await dispatch(
          loginTeacher(username, password, props.loginComplete),
        );
        console.log('----->', data);
      }
    } catch (e) {
      ToastAndroid.show(e.message, ToastAndroid.SHORT);
    }
  };
  const {styles} = useStyles();
  return (
    <View
      style={{
        width: Dimensions.get('window').width * 0.6,
        ...styles.popUpContainer,
      }}>
      <Row style={styles.popUpTitleContainer}>
        <Text style={styles.popUpTitleStyle}>
          {props.userType === 2 ? '管理员用户登录' : '普通用户登录'}
        </Text>
      </Row>
      <View style={styles.popUpInputContainerStyle}>
        <View style={styles.popUpInputRowStyle}>
          <Text style={{fontSize: rem(8)}}>账号</Text>
          <TextInput
            placeholder={'请输入账号'}
            style={styles.popUpInputTextStyle}
            value={username}
            ref={usernameRef}
            autoCorrect={false}
            autoCapitalize={'none'}
            onChangeText={text => setUsername(text)}
            onSubmitEditing={() => usernameRef && usernameRef.current.blur()}
          />
        </View>
        <View style={styles.popUpInputRowStyle}>
          <Text style={{fontSize: rem(8)}}>密码</Text>
          <TextInput
            placeholder={'请输入密码'}
            ref={passwordRef}
            value={password}
            secureTextEntry={secureTextEntry}
            style={styles.popUpInputTextStyle}
            onChangeText={text => setPassword(text)}
            onSubmitEditing={() => passwordRef && passwordRef.current.blur()}
          />
        </View>
      </View>
      <Row style={{justifyContent: 'space-around'}}>
        <ColorButton
          onPress={props.loginCancel}
          backgroundColor={'white'}
          title={'取消'}
          color={'black'}
          fontSize={rem(9)}
          height={hp(4)}
          containerStyle={styles.popUpButtonContainerStyle}
        />
        <ColorButton
          onPress={login}
          backgroundColor={Colors.primaryColor}
          title={'登录'}
          color={'white'}
          fontSize={rem(9)}
          height={hp(4)}
          containerStyle={styles.popUpButtonContainerStyle}
        />
      </Row>
    </View>
  );
}
